/**
 * @description 数据字典右边编辑弹窗
 * @author 李艳
 */

import React, {Component} from 'react'
import {Form, Input, Checkbox, Modal, Row, InputNumber} from 'antd';
import {checkInputCode, getUserInfo} from "../../../../commons/utils/CommonUtils";
import SearchTable from "../../../../commons/components/SearchTable";
import {findTenantAllUnfrozenConfig} from "../../../../configs/CommonComponentsConfig";

const FormItem = Form.Item;

class EditRightModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      initValue: false,
      initValueName: false,
    }
  }

  componentWillMount() {
    const {defaultValue = {}} = this.props;
    const {code,value,name,valueName}=defaultValue;
    if(code&&!value){
      this.setState({initValue:code})
    }
    if(name&&!valueName){
      this.setState({initValueName:name})
    }
  };

  handleClose = () => {
    this.props.form.resetFields();
  };

  componentDidMount() {
    this.props.onRef(this);
  }

  codeLimit = (e) => {
    let value = e.target.value;
    console.log(value);
    e.target.value = value.replace(/[^a-zA-Z0-9-_.]*/g, "")
  };
  codeValidator=(rule, v, callback)=>{
    // let value = this.props.form.getFieldValue(`value`);
    // if(initValue)

  };
  codeOnBlur=(e)=>{
    let value = e.target.value;
    console.log(value);
    if(!this.state.initValue&&!this.props.form.getFieldValue(`value`)) {
      this.props.form.setFieldsValue({value});
      this.setState({initValue:true});
    }
  };
  valueNameOnBlur=(e)=>{
    let value = e.target.value;
    console.log(value);
    if(!this.state.initValueName&&!this.props.form.getFieldValue(`valueName`)) {
      this.props.form.setFieldsValue({valueName:value});
      this.setState({initValueName:true});
    }
  };
  codeOnBlurSelf=(e)=>{
    let value = e.target.value;
    console.log(value);
    if(value) {
      this.setState({initValue:false});
    }
  };
  valueNameOnBlurSelf=(e)=>{
    let value = e.target.value;
    console.log(value);
    if(value) {
      this.setState({initValueName:false});
    }
  };

  render() {
    const formItemLayout = {
      labelCol: {
        span: 7
      },
      wrapperCol: {
        span: 15
      },
    };

    const {confirmLoading, modalVisible, handleOk, handleCancel, defaultValue, isAdd, categoryCode} = this.props;
    const {getFieldDecorator, getFieldValue} = this.props.form;
    let title = "编辑数据字典";
    let FormValue = defaultValue;


    if (isAdd) {
      title = "新增数据字典";
      FormValue = {};
    }
    return (
      <div>
        <Modal title={title}
               visible={modalVisible}
               onOk={handleOk}
               onCancel={handleCancel}
               width={500}
               afterClose={this.handleClose}
               confirmLoading={confirmLoading}
               maskClosable={false}
        >
          <Row>
            <FormItem
              style={{display: "none"}}
              label="categoryCode">
              {getFieldDecorator('categoryCode', {
                initialValue: categoryCode ? categoryCode : null,
              })(
                <Input/>
              )}
            </FormItem>
            <FormItem
              style={{display: "none"}}
              label="id">
              {getFieldDecorator('id', {
                initialValue: FormValue.id ? FormValue.id : null,
              })(
                <Input/>
              )}
            </FormItem>
            <FormItem
              label={"租户"}
              {...formItemLayout}
            >
              {getFieldDecorator('tenantCode', {
                initialValue: FormValue.tenantCode ? FormValue.tenantCode : null,
              })(
                <SearchTable config={findTenantAllUnfrozenConfig}/>
              )}
            </FormItem>
            <FormItem
              label={"代码"}
              {...formItemLayout}
            >
              {getFieldDecorator('code', {
                initialValue: FormValue.code ? FormValue.code : null,
                rules: [{required: true, message: '请填写代码!', whitespace: true}
                  ,checkInputCode(), {max: 50, message: '代码最大长度为50'}
                  // , {
                  //   validator: (rule, value, callback) =>
                  //     this.codeValidator(rule, value, callback)
                  // }
                ]
              })(
                <Input
                       onBlur={this.codeOnBlur}
                />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="名称">
              {getFieldDecorator('name', {
                initialValue: FormValue.name ? FormValue.name : "",
                rules: [{required: true, message: '请填写名称!', whitespace: true},
                  {max: 200, message: '代码最大长度为200'}]
              })(
                <Input onBlur={this.valueNameOnBlur}/>
              )}
            </FormItem>

            <FormItem
              {...formItemLayout}
              label="值">
              {getFieldDecorator('value', {
                initialValue: FormValue.value ? FormValue.value : null,
                rules: [{required: true, message: '请填写值!', whitespace: true},checkInputCode(), {max: 50, message: '代码最大长度为50'}]
              })(
                <Input onBlur={this.codeOnBlurSelf}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="值描述">
              {getFieldDecorator('valueName', {
                initialValue: FormValue.valueName ? FormValue.valueName : "",
                rules: [{required: true, message: '请填写值描述!', whitespace: true},
                  {max: 200, message: '代码最大长度为200'}]
              })(
                <Input onBlur={this.valueNameOnBlurSelf}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="描述">
              {getFieldDecorator('remark', {
                initialValue: FormValue.remark ? FormValue.remark : "",
                rules: [{required: true, message: '请填写描述!',whitespace: true}]
              })(
                <Input.TextArea rows={3}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="排序">
              {getFieldDecorator('rank', {
                initialValue: FormValue.rank ? FormValue.rank : 0,
              })(
                <InputNumber precision={0} min={0} style={{width:"100%"}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="冻结">
              {getFieldDecorator('frozen', {
                valuePropName: 'checked',
                initialValue: FormValue.frozen,
              })(
                <Checkbox/>
              )}
            </FormItem>
          </Row>
        </Modal>
      </div>
    );
  }
}

EditRightModal = Form.create()(EditRightModal);
export default EditRightModal;
